<html lang="zh-cn">
<head>
    <title>二维码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="../js/libs/jquery.min.js"></script>
    <script type="text/javascript" src="../js/libs/qrcode/qrcode.min.js"></script>
</head>
<body>
<div style="text-align: center">
    <input id="text" type="text" value="0" style="width:90%;text-align: center;display:none" />
    <select id="selects" onchange="setTextValue(this.value)"></select>
</div>
<div id="qrcode" style="width:200px; height:200px; margin:20px auto; text-align: center">
</div>

<script type="text/javascript">
    window.onload=function () {
        var ip=args('f');
        if(ip){
            document.getElementById('text').value="http://"+ip;
            document.getElementById('text').style.display="";
            document.getElementById('selects').style.display="none";
            makeCode();
        }else{
            $.ajax({
                type: "GET",
                url: "/api/sip",
                dataType: "json",
                success: function(rs){
                    //select
                    var obj_urls=document.getElementById('selects');
                    var str="";
                    for(i=0;i<rs.data.length;i++){
                        str=str+"<option>"+rs.data[i]+"</option>";
                    }
                    obj_urls.innerHTML=str;
                    setTextValue(rs.data[0]);
                    document.getElementById('text').style.display="none";
                    document.getElementById('selects').style.display="";
                    makeCode();
                }
            });
        }
        makeCode();
    };

    function setTextValue(v){
        document.getElementById('text').value="http://"+v;
        makeCode();
    }

    function args(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]); return null;
    }
    //alert(args('f'));
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 200,
        height : 200
    });


    function makeCode () {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
    }

    $("#text").
        on("blur", function () {
            makeCode();
        }).
        on("keydown", function (e) {
            if (e.keyCode === 13) {
                makeCode();
            }
        });

</script>
</body>
</html>